<!--
    @auther: bypanghu<bypanghu@163.com>
    @date: 2024/5/8
    @desc: 图表组件，根据 type 决定显示的图表
!-->

<template>
  <div class="">
    <div class="flex items-center justify-between mb-2">
      <div v-if="title" class="font-bold">
        {{ title }}
      </div>
      <slot v-else name="title" />
    </div>
    <div class="w-full relative">
      <div v-if="type <= 4">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="268500" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +80% <el-icon><TopRight /></el-icon>
        </div>
      </div>

      <div class="absolute top-0 right-2 w-[50%] h-20">
        <charts-people-number v-if="type === 1" :data="data[0]" height="100%" />
        <charts-people-number v-if="type === 2" :data="data[1]" height="100%" />
        <charts-people-number v-if="type === 3" :data="data[2]" height="100%" />
        <charts-people-number v-if="type === 4" :data="data[3]" height="100%" />
      </div>

      <charts-content-number v-if="type === 5" height="14rem" />
      <charts-pie v-if="type === 6" height="14rem" :data="pieData[0]" title="饼图" />
      <charts-pie v-if="type === 7" height="14rem" :data="pieData[1]" title="饼图" />
      <charts-pie v-if="type === 8" height="14rem" :data="pieData[2]" title="饼图" />
      <div v-if="type === 9" class="flex items-center">
        <div class="w-1/6 text-center">
          <el-text class="font-bold"> 收益总额（元）</el-text>
          <div class="mt-4 text-gray-600 text-3xl font-mono">
            <el-statistic :value="268500" />
          </div>
        </div>
        <div class="w-5/6">
          <charts-content-number height="14rem" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import chartsPeopleNumber from "./charts-people-numbers.vue";
import chartsContentNumber from "./charts-content-numbers.vue";
import chartsPie from "./charts-pie.vue";

const props = defineProps({
  type: {
    type: Number,
    default: 1
  },
  title: {
    type: String,
    default: ""
  },
  pieData: {
    type: Array,
    default: () => [
      [ { value: 1048, name: '数据交换' }, { value: 735, name: '数据存储' } ],
      [ { value: 580, name: '业务应用数' }, { value: 484, name: '连接数' } ],
      [ { value: 300, name: '服务数' }, { value: 200, name: '连接数' } ]
    ]
  }
});

const data = [
  [12, 22, 32, 45, 32, 78, 89, 92],
  [1, 2, 43, 5, 67, 78, 89, 12],
  [12, 22, 32, 45, 32, 78, 89, 92],
  [1, 2, 43, 5, 67, 78, 89, 12]
];
</script>

<style scoped lang="scss">
</style>
